<!-- 班级名单弹窗 -->
<template>
  <div class="ele-body">
  <el-dialog
    title="班级名单"
    :visible="visible"
    width="80%"
    :destroy-on-close="false"
    :lock-scroll="false"
    @update:visible="updateVisible"
    v-loading.fullscreen.lock="fullscreenLoading">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="学生账号:">
              <el-input
                clearable
                v-model="where.username"
                placeholder="请输入学生账号"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="性别:">
              <el-select
                clearable
                v-model="where.gender"
                placeholder="请选择性别"
                class="ele-fluid">
                <el-option label="男" value="1"/>
                <el-option label="女" value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload">查询
              </el-button>
              <!-- <el-button @click="reset">重置</el-button> -->
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            v-if="this.data.stype === 2"
            @click="openImport(data.id)"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            size="small">添加名单
          </el-button>
          <el-button
            v-if="this.data.stype === 2"
            @click="batchImport(data.id)"
            type="success"
            icon="el-icon-plus"
            class="ele-btn-icon"
            size="small">导入名单
          </el-button>
          <el-button
            v-if="this.data.stype === 2"
            @click="braceletImport(data.id)"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            size="small">导入手环
          </el-button>
          <el-button
            size="small"
            type="success"
            icon="el-icon-download"
            class="ele-btn-icon"
            @click="exportExcel">导出
          </el-button>
          <!-- <el-button
            @click="removeBatch"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            size="small"
            v-if="permission.includes('sys:member:dall')">删除
          </el-button> -->
        </template>
        <!-- 性别列 -->
        <template slot="gender" slot-scope="{row}">
          <el-tag
            :type="['success', 'primary', 'warning'][row.gender-1]"
            size="mini">
            {{ ['男', '女', '保密'][row.gender - 1] }}
          </el-tag>
        </template>
        <!-- 院系类型列 -->
        <template slot="type" slot-scope="{row}">
          <el-tag v-if="row.type === 1" type="" size="small">学生</el-tag>
          <!-- <el-tag v-if="row.stype === 2" type="success" size="small"></el-tag> -->
        </template>
        <!-- 头像 -->
        <template slot="avatar" slot-scope="{row}">
          <el-avatar shape="square" :size="25" :src="row.avatar"/>
        </template>
        <!-- 设备类型列 -->
        <template slot="device" slot-scope="{row}">
          <el-tag
            :type="['primary','success','warning', 'danger', 'info'][row.device-1]"
            size="mini">
            {{ ['苹果', '安卓', 'WAP站', 'PC站', '后台'][row.device - 1] }}
          </el-tag>
        </template>
        <!-- 注册来源列 -->
        <template slot="source" slot-scope="{row}">
          <el-tag
            :type="['primary','success','warning', 'danger', 'info'][row.source-1]"
            size="mini">
            {{ ['APP注册', '小程序注册', '网站注册', 'WAP站注册', '马甲学生'][row.source - 1] }}
          </el-tag>
        </template>
        <!-- 手环状态列 -->
        <template slot="bracelet" slot-scope="{row}">
          <el-tag v-if="!row.bracelet" type="" size="small">未绑定</el-tag>
          <el-tag v-if="row.bracelet" type="success" size="small">标签号：{{row.bracelet}}</el-tag>
        </template>
        <!-- 状态列 -->
        <template slot="status" slot-scope="{row}">
          <el-tag v-if="row.status==1" type="success" size="small">启用</el-tag>
          <el-tag v-if="row.status==2" type="danger" size="small">停用</el-tag>
        </template>
        <!-- 操作列 -->
        <!-- <template slot="action" slot-scope="{row}">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit(row)"
            v-if="permission.includes('sys:member:edit')">修改
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此学生吗？"
            @confirm="remove(row)">
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              v-if="permission.includes('sys:member:delete')">删除
            </el-link>
          </el-popconfirm>
        </template> -->
      </ele-pro-table>
    </el-card>


    <div slot="footer" v-if="this.data.stype==2">
      <!-- <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">保存
      </el-button> -->
    </div>
  </el-dialog>

  <!-- 导入名单弹窗 -->
    <list-import
    :data="current"
    :visible.sync="showImport"
    @done="reload"/>
    <!-- <el-dialog
      title="导入名单"
      :visible="showbatchImport"
      width="40%"
      :destroy-on-close="false"
      :lock-scroll="false"
      @update:visible="updateVisible2">
      <el-form
        ref="form2"
        label-width="100px">
        <el-input
          :rows="3"
          clearable
          type="textarea"
          v-model="rolllist"
          placeholder="请输入学员学籍号,一行一个"/>
      </el-form>
      <el-button
        @click="saveImport()"
        type="success"
        class="ele-btn-icon"
        size="small">确认导入
      </el-button>
      </el-dialog> -->
      <batch-import
      :data="current"
      :visible.sync="showbatchImport"
      @done="reload"/>

      <bracelet-import
      :data="current"
      :visible.sync="showbraceletImport"
      @done="reload"/>

</div>
</template>

<script>
import { mapGetters } from "vuex";
import ListImport from './list-import';
import BatchImport from './batch-import';
import BraceletImport from './bracelet-import';
export default {
  name: 'ClssList',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {ListImport,BatchImport,BraceletImport},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({status:1}, this.data),
      rolllist: '',
      // 表格数据接口
      url: '/clss/getStuList',
      // 表格列配置
      columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: "left"
          },
          {
            prop: 'id',
            label: 'ID',
            width: 60,
            align: 'center',
            showOverflowTooltip: true,
            fixed: "left"
          },
          {
            prop: 'realname',
            label: '姓名',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
          },
          {
            prop: 'roll',
            label: '学籍号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'grade_name',
            label: '年级',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'type',
            label: '角色',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            slot: 'type'
          },
          {
            prop: 'username',
            label: '账户名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'bracelet',
            label: '手环状态',
            align: 'center',
            visible: false,
            width: 80,
            resizable: false,
            slot: 'bracelet',
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            width: 80,
            resizable: false,
            slot: 'status',
          },
          {
            columnKey: 'avatar',
            label: '人脸',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 60,
            slot: 'avatar'
          },
          {
            prop: 'superior_name',
            label: '院系名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 60,
          },
          {
            prop: 'professional_name',
            label: '专业',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
          },
          {
            prop: 'class_name',
            label: '专业班级',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
          },
          {
            prop: 'gender',
            label: '性别',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 60,
            slot: 'gender'
          },
          {
            prop: 'create_time',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
            formatter: (row, column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
        }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 加载状态
      fullscreenLoading: false,
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,

      // 是否显示导入弹窗
      showImport: false,
      showbatchImport: false,
      showbraceletImport: false,
      // 学院列表
      schoolList: [],
      // 父级院系列表
      departmentsList: [],
      // 年级列表
      gradeList: [],
      // 专业列表
      professionalList: [],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.where = {class:this.data.id,stype:this.data.stype};
        if(this.data.stype==2){
          this.toggleColumnVisibility('bracelet',true);
        }else{
          this.toggleColumnVisibility('bracelet',false);
        }
        // console.log(this.data);
        this.form = Object.assign({}, this.data);
        this.reload();
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  mounted() {
    // 获取学院列表
    this.getSchoolList();
    // 获取父级院系列表
    this.getDepartmentsList();
  },
  methods: {
    toggleColumnVisibility(columnProp,vis) {
          const column = this.columns.find(c => c.prop === columnProp);
          if (column) {
            column.visible = vis;
          }
        },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    // reset() {
    //   this.where = {};
    //   this.reload();
    // },
    /* 显示导入 */
    openImport(row) {
      this.current = row;
      this.showImport = true;
    },
    batchImport(row) {
      this.current = row;
      this.showbatchImport = true;
    },
    braceletImport(row) {
      this.current = row;
      this.showbraceletImport = true;
    },
    saveImport() {
      this.loading = true;
      if(this.rolllist==''){
        this.loading = false;
        this.$message.error('请输入学籍号');
        return false;
      }
      var rolllistarr = this.rolllist.split('\n');
      this.$http.post('/clss/saveImportroll', {class:this.data.id,rolllist:rolllistarr}).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.showbatchImport = false;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.form.features = JSON.stringify(this.form.features);
          // console.log(this.form.features);
          // return false;
          this.$http.post('/clss/saveList', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },

    /* 更新visible */
    updateVisible2(value) {
      this.showbatchImport = value;
    },

    /* 导出数据Excel */
    exportExcel() {
      this.$http
        .post("/clss/exportbraceletExcel", {class:this.data.id})
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            // 下载文件
            window.location.href = data.data;
            this.$message({
              type: "success",
              message: "导出成功",
            });
          } else {
            this.$message.error("导出失败");
          }
        })
    },
    /**
     * 获取组织列表
     */
    getSchoolList() {
      this.$http.get('/school/getSchoolList').then(res => {
        if (res.data.code === 0) {
          this.schoolList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取院系列表
     */
    getDepartmentsList() {
      if(this.form.organization){
        this.form.superior = null;
        this.$forceUpdate();
        this.getGradeList();
      }
      this.$http.post('/departments/getDepartmentsList',{sid:this.form.organization}).then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取年级列表
     */
    getGradeList() {
      if(this.form.organization){
        this.form.grade = null;
        this.$forceUpdate();
      }
      this.$http.post('/grade/getGradeList',{oid:this.form.organization}).then(res => {
        if (res.data.code === 0) {
          this.gradeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取专业列表
     */
    getProfessionalList() {
      if(this.form.superior){
        this.form.professional = null;
        this.$forceUpdate();
      }
      this.$http.post('/professional/getProfessionalList',{sid:this.form.superior}).then(res => {
        if (res.data.code === 0) {
          this.professionalList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  }
}
</script>

<style scoped>
</style>
